<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="../public/css/hb_wap.css">
    <title>less 学习</title>
</head>
<body>

<style>
    #test:target{
        background-color: lightblue;
    }

    #nav{
        display: none;
    }
    #nav:target{
        display: block;
    }
    #nav:target .btn_close{
        display: inline-block;
    }

    /* 默认是隐藏关闭按钮 */
    #nav .btn_close{
        display: none;
    }
    /* 默认是隐藏关闭按钮 */
    #nav:target .btn_close{
        display: block;
    }
    .btn{
        position: absolute;
        left: 0px;
        top: 0px;
    }
</style>

<div class="relative">
    <a href="#nav" class="btn_open btn">显示</a>
    <ul class="list_unstyled" id="nav">
        <li>张三1</li>
        <li>张三2</li>
        <li>张三3</li>
        <li>张三4</li>
        <a href="#sss" class="btn_close btn">关闭</a>
    </ul>
</div>

</body>
</html>
